<template>
    <div class="CradioGroup">
        <div :class="{'is-active': value === item.value}" @click="click(item)" v-for="(item, index) in options">
            {{ item.label }}
        </div>
    </div>
</template>
<script lang="ts" setup>
import { defineProps, ref } from 'vue';
type Props = {
    modelValue: string;
    options: Array<{ label: string; value: string }>;
}
const emit = defineEmits(['update:modelValue','change']);
const props = defineProps<Props>();
const value = ref(props.modelValue);
const click = (item: { label: string; value: string }) => {
    value.value = item.value;
    emit('update:modelValue', value.value);
    emit('change', value.value);

}
</script>
<style scoped lang="scss">
.CradioGroup {
    display: flex;
    justify-content: space-between;

    >div {
        flex: 1;
        border: 1px solid #ccc;
        text-align: center;
        cursor: pointer;
        // 禁止复制
        user-select: none;
        color: #000;

    }
    .is-active {
        background-color: rgba(43, 164, 235, 0.733);
        color: #fff;
    }

}
</style>